웹 프론트엔드 개발

HTML / CSS / JavaScript 개발을 포괄해서 웹 프론트엔드 개발이라고 한다. 웹 퍼블리싱, 웹 코딩 등으로 불리기도 한다.

패키지#

패키지 관리#

CSS, JavaScript 패키지들을 쉽게 설치해주는 도구로 bower가 있다. 웹 개발의 필수 도구다.

필수 라이브러리#

• jQuery
• Bootstrap
• FontAwesome

위지윅 에디터#

오픈소스로는 오랫동안 CKEditor와 TinyMCE가 경쟁해왔고, 최근 몇 년간 CKEditor가 앞서 나갔으나, 버전 4를 발표하면서 문서가 개판이 되었고, TinyMCE는 버전 4를 발표하면서 좀더 좋아졌다. 에디터와 엮어서 개발해야 할 것이 많다면 TinyMCE 추천.

redactor는 최근에 등장해서 높은 평가를 받고 있고, 제공하는 기능이 가장 안정적이라고 평가되지만 API가 다소 부족하고 문서도 부실하다. 국산으로 summernote가 jQuery, Bootstrap, FontAwesome을 활용해서 개발되어 코드 양으로 효과적으로 줄여 미래가 촉망되지만, 아직은 문서가 부족하다. 위지윅 에디터들이 처음 나올 때는 jQuery도 Bootstrap도 없기도 했고, 라이브러리 의존성이 제약사항이 되기 때문에 그런 기능들을 전부 자체 개발해왔는데 앞으로는 summernote 같은 아키텍처가 더 유리할 것 같다.

기타 유용한 라이브러리#

• highlightjs 코드 문법강조
• CodeMirror 소스코드 에디터
• isotope 플립보드 스타일의 레이아웃. 관련 라이브러리 중 가장 강력하고 안정적이다.
• fancybox 팝업 다이얼로그. 2.x부터 유료가 되었는데 여전히 1.x를 쓸 수 있지만 bower는 2.x를 설치해준다. 요즘은 Bootstrap의 modal에 밀리는 추세.

HTML / CSS#

CSS 설계 원칙 같은 글을 있지만, 이제는 그냥 Bootstrap이 베스트 프랙티스다.

Responsive Design#

CSS 문제 해결#

IE CSS Hack

float 엘리먼트의 컨테이너의 height가 0이 되는 문제

IE6 position:absolute bug

파일 업로드 버튼 CSS로 꾸미기

IE6 png 투명 문제

개발 도구#

IE 버전별 테스트#

http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

기타#

• 1 pixel을 위한 도구 : http://pitaschio.ara3.net/download.htm
• bootstrap 버튼 생성기 http://charliepark.org/bootstrap_buttons/
• Firebug
• IE8
• Debugbar
• IETester

• Firefox + Html Validator [홈페이지]

  • W3C 에서 제공하는 도구는 찾아가서 웹 페이지를 테스트 하는데 불편하다.
  • Firefox 에 Html Validator 를 설치하면 별도의 Validation Check 를 하지 않아도 항상 실시간으로 브라우저 우측 하단의 상태 표시줄에 Validation 검증 결과가 표시된다.
  • W3C의 검사결과에 준하는 검증결과를 위해서 Html Validator 의 옵션에서 알고리즘을 SGML Parser 로 선택해야 한다.
    SGML Parser는 W3C에서 제공하는 검사결과와 거의 동일한 결과를 출력한다.
• http://www.cleancss.com : css 정리, 문법 검사

• HTML 코드 정리하기

  • TIDY 가 가장 유명한데 설정하는 법을 좀 파봐야 할듯. 지금은 " 다음에 줄바꿈을 해버리고 블럭 사이에 빈줄 들어가는등 사용할만큼 되지 못함.
  • 내가 사용하는 방식은 IE 개발자 도구 에서 OuterHtml 복사 > Dreamweaver 에서 소스 코드 포맷팅 실행 > 이클립스에서 두개의 공백을 탭으로 전환
    이렇게 하면 거의 내가 원하는 형태가 만들어진다.

• HTML 에디터

  • JetBrains RubyMine, IntelliJ IDEA

    • HTML 편집 기능에서 드림위버에 거의 근접하면서 다른 기능들이 잘 붙어 있고 이클립스보다 월등히 빠르다.
  • JetBrains WEB IDE : RubyMine HTML/CSS가 좋다고 피드백을 보냈더니 그 목적이라면 WEB IDE를 추천한다면서 http://www.jetbrains.net/confluence/display/WI/Web+IDE+EAP를 보내줌.

  • Dreamweaver

    • HTML 편집만 놓고 보면 가장 빠르고 편리하다.
    • 일반적인 텍스트 편집 기능, 프로젝트 관리 기능, 버전 관리 통합 등이 만족스럽지 않다.

  • Eclipse Web Tools

    • 공짜 중에는 그나마 쓸만한
    • 이클립스가 너무 느리다.

  • Aptana

    • Web Tools보다 HTML 편집 기능은 약간 나은데 수많은 단점이 있다. 비추

• CSS 3 도구

  • http://gradients.glrzad.com/ CSS 3 그라데이션
  • http://lea.verou.me/css3patterns/ CSS 배경 패턴 갤러리